<template>
	<view class="news-nav">
		<!--#ifdef APP-PLUS -->
		<uni-nav-bar :statusBar="true" :border="false" :fixed="true">
			<!--  #endif -->
			<!--  #ifdef MP -->
			<uni-nav-bar :border="false" :fixed="true">
				<!--  #endif -->
				
				<view slot="left" class="f-ajc nav-left iconfont icon-qian">
				</view>
				<view class="nav-center f-ajc">
					
					<view v-for="(item,index) in tabList" :key="index" @tap="changeTab(index)" :class="{active:current == index}">{{item.name}}
						<view></view>
					</view>
				</view>
				
				<view slot="right" class="f fe nav-right iconfont icon-pencil" @tap="toEdit">
				</view>
				
			</uni-nav-bar>
	</view>
</template>

<script>
	import UniNavBar from "../../components/uni-nav-bar/uni-nav-bar.vue"
	export default {
		props:{
			currentTab: {
				type: Number,
				default: 0
			}
		},
		components:{
			UniNavBar
		},
		watch: {
			currentTab(v){
				this.current = v
			}
		},
		data(){
			return {
				current: this.currentTab,
				tabList : [{
					name:"关注"
				},{
					name: "话题"
				}]
			}
		},
		methods:{
			changeTab(index){
				this.current = index
				this.$emit('changeTab',index)
			},
			toEdit(){
				uni.navigateTo({
					url: '../../pages/fabu/fabu',
				});
			}
		}
	}
</script>

<style scoped>
	
	.nav-right{
		margin-right: 10rpx;
		width: 100%;
		display: flex;
		justify-content: flex-end;
		font-size: 43rpx;
		padding-right: 20rpx;
	}
	.nav-left {
		color: #FF9619;
		font-size: 57rpx;
		margin-right: -30rpx;
	}
	.nav-center {
		width: 480rpx;
		text-align: center;
		margin-left: -30rpx;
	}
	.nav-center > view{
		font-size: 30rpx;
		color: #969696;
		font-weight: 900;
	}
	.nav-center > view:last-child{
		margin-left: 20rpx;
	}
	.nav-center  view.active{
		color: #000000 !important;
	}
	.nav-center  view.active > view:last-child{
		border-radius: 8rpx;
		border-top: 6rpx solid #fede33;
	}
</style>
